<script setup>

import {ref} from 'vue';
import * as roleApi from '@/api/roleApi.js';
import {message} from 'ant-design-vue';

const loading = ref(false);
const open = ref(false);
const formRef = ref(null);
const emits = defineEmits(['saveSuccessful'])

const form = ref({
  roleId: '',
  roleKey: '',
  roleName: '',
  orderNum: ''
})
const onOpen = (roleId) => {
  if (roleId) {
    handleUpdate(roleId)
  }
  open.value = true
}

const handleUpdate = (roleId) => {
  roleApi.roleOne(roleId).then(res => {
    form.value = res
    onOpen()
  })
}
const onClose = () => {
  open.value = false
  resetForm()
}


const resetForm = () => {
  formRef.value.resetFields();
  form.value.roleId = ''
};


const submit = () => {
  loading.value = true
  formRef.value.validate().then(() => {
    if (form.value.roleId) {
      roleApi.editRole(form.value).then(() => {
        message.success('更新成功')
        loading.value = false
        emits('saveSuccessful')
        onClose()
      }).finally(() => loading.value = false)
    } else {
      roleApi.saveRole(form.value).then(() => {
        message.success('保存成功')
        emits('saveSuccessful')
        loading.value = false
        onClose()
      }).finally(() => loading.value = false)
    }
  }).catch(() => {loading.value = false})

}

defineExpose({
  onOpen
})


</script>

<template>

  <a-drawer
      title="新增角色"
      :width="500"
      @close="onClose"
      :open="open"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
  >

    <a-form :model="form" ref="formRef" layout="vertical">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item
              label="角色名称"
              name="roleName"
              :rules="[{ required: true, message: '请输入角色名称' }]"
          >
            <a-input
                placeholder="请输入角色名称"
                v-model:value="form.roleName"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">

          <a-form-item
              label="角色key"
              name="roleKey"
              :rules="[{ required: true, message: '请输入角色key' }]"
          >
            <a-input
                placeholder="请输入角色名称"
                v-model:value="form.roleKey"
            ></a-input>

          </a-form-item>


        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">

          <a-form-item
              label="角色排序"
              name="orderNum"
              :rules="[{ required: true, message: '请输入排序' }]"
          >
            <a-input-number
                class="w-full"
                placeholder="请输入排序"
                v-model:value="form.orderNum"
            ></a-input-number>
          </a-form-item>

        </a-col>
      </a-row>
    </a-form>


    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button :loading="loading" type="primary" @click="submit">提交</a-button>
      </a-space>
    </template>

  </a-drawer>

</template>

<style scoped>

</style>
